<template>
  <div class="_wz_riskListAdd">
    <div style="padding: 10px 0 0 0;">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable @on-change="enterpriseGroup">
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="隐患部位" prop="riskPositionName">
          <i-input v-model="formData.riskPositionName" placeholder="请填写隐患部位" clearable />
        </FormItem>
        <FormItem label="隐患类型" prop="riskPositionType">
          <i-select v-model.number="formData.riskPositionType" filterable placeholder="请选择隐患类型" clearable>
            <Option :value="1">基础管理</Option>
            <Option :value="2">设备设施</Option>
            <Option :value="3">作业活动</Option>
          </i-select>
        </FormItem>
        <FormItem label="特种设备" prop="riskPositionDeviceState">
          <i-switch v-model="formData.riskPositionDeviceState" :true-value="Number(1)" :false-value="Number(0)">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </FormItem>
        <FormItem label="设施编号" prop="riskPositionDeviceNo">
          <i-input v-model.number="formData.riskPositionDeviceNo" placeholder="请填写设备编号" clearable />
        </FormItem>
        <FormItem label="责任部门" prop="riskPositionInOrgUuid">
          <i-select v-model="formData.riskPositionInOrgUuid" placeholder="请选择责任部门" clearable @on-change="departmentalAl">
            <Option v-for="item in departmentList" :value="item.uuid" :key="item.uuid">{{ item.inOrgName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="责任人" prop="riskPositionUserUuid">
          <i-select v-model="formData.riskPositionUserUuid" placeholder="请选择责任人" clearable>
            <Option v-for="item in systemUserPageList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="隐患区域" prop="riskPositionSiteLocation">
          <i-input v-model="formData.riskPositionSiteLocation" placeholder="请填写隐患区域" clearable />
        </FormItem>
        <FormItem label="隐患描述" prop="riskPositionContext">
          <i-input v-model="formData.riskPositionContext" placeholder="请填写隐患描述" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
        <FormItem label="隐患部位照片" prop="riskPositionFile">
          <Upload :before-upload="riskPositionFileFun" action="" style="color: #2d8cf0;cursor: pointer;">上传照片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!riskPositionFileData.url?riskPositionFileData.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      uploadProgress: 0,//文件上传进度
      riskPositionFileData:{//上传照片
        url:'',
        data:null,
      },
      systemUserPageList:[],//人员list
      departmentList:[],//部门list
      spinShow: false,//本页加载
      ruleValidate: {//正则
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        riskPositionSiteLocation: [
          {required: true, message: '请填写隐患区域', trigger: 'blur'}
        ],
        // riskPositionContext: [
        //   {required: true, message: '请填写隐患描述', trigger: 'blur'}
        // ],
        riskPositionUserUuid: [
          {required: true, message: '请选择责任人', trigger: 'blur'}
        ],
        riskPositionInOrgUuid: [
          {required: true, message: '请选择责任部门', trigger: 'blur'}
        ],
        riskPositionType: [
          {type:'number',required: true, message: '请选择隐患类型', trigger: 'blur'}
        ],
        riskPositionName: [
          {required: true, message: '请填写隐患部位', trigger: 'blur'}
        ],
      },
      subDeptList: [],//运输企业
      formData: {},
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.selectData.riskPositionDeviceState = !!that.selectData.riskPositionDeviceState ? that.selectData.riskPositionDeviceState : 0
    that.formData = that.selectData;
    if(!!that.formData.riskPositionSiteImg){//图片存在
      that.riskPositionFileData = {url:that.apiUrl.imgUrl + that.formData.riskPositionSiteImg};
    }
    if(!!that.formData.id){// 修改
      that.enterpriseGroup(that.formData.deptUuid);
      that.departmentalAl(that.formData.riskPositionInOrgUuid);
    }


    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if(!that.selectData.id){
          that.$set(that.formData, 'deptUuid', that.subDeptList[0].uuid)//赋值
          that.$set(that.formData, 'deptName', that.subDeptList[0].deptName)//赋值
          that.enterpriseGroup(that.subDeptList[0].uuid)
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    //上传照片
    riskPositionFileFun(file) {
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.riskPositionFileData.url = window.URL.createObjectURL(file);
        that.riskPositionFileData.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //企业级联
    enterpriseGroup(data){
      let that = this;
      if(!!data){
        //部门
        that.axios.post(that.apiUrl.coreInOrgCoreInOrgList,{deptUuid:that.formData.deptUuid}).then(res => {
          if (!!res) {
            that.departmentList = res.data.data;
            if(that.departmentList.length == 0){

              that.departmentList = [];
              that.$set(that.formData, 'riskPositionInOrgUuid', '')//赋值
              that.systemUserPageList = [];
              that.$set(that.formData, 'riskPositionUserUuid', '')//赋值
            }
          }
        }).catch(err => {
          console.log("失败", err)
        })
      }else{
        that.departmentList = [];
        that.$set(that.formData, 'riskPositionInOrgUuid', '')//赋值
        that.systemUserPageList = [];
        that.$set(that.formData, 'riskPositionUserUuid', '')//赋值
      }
    },
    //部门级联
    departmentalAl(data){
      let that = this;
      that.systemUserPageList = [];
      if(!!data){
        that.axios.post(that.apiUrl.systemUserSystemUserList,{inOrgUuid:that.formData.riskPositionInOrgUuid}).then(res => {
          if (!!res) {
            that.systemUserPageList = res.data.data;
            if(that.systemUserPageList.length == 0){
              that.systemUserPageList = [];
              that.$set(that.formData, 'riskPositionUserUuid', '')//赋值
            }
          }
        }).catch(err => {
          console.log("失败", err)
        })
      }else{
        that.systemUserPageList = [];
        that.$set(that.formData, 'riskPositionUserUuid', '')//赋值
      }
    },
    //提交表单
    addSubmit(name) {
      let that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用

          let data = that.formData;
          let formData = new FormData();

          for (let key in data) {
            formData.append(key, data[key]);
          }
          //上传照片
          if (!!that.riskPositionFileData.data) {//选择了图片
            formData.append('riskPositionFile', that.riskPositionFileData.data);
          }

          that.axios.post(that.apiUrl.riskPositionRiskPositionSaveOrUpdate, formData,that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })

        } else {
          this.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_riskListAdd {

  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
